<template>
	<view>
		<!-- 定位盒子 -->
		<div class="box">
			<img src="https://p0.pipi.cn/mmdb/fb73869ad7c5bf9257be12a190e022145f7a2.jpg?imageView2/1/w/160/h/220" alt="">
			<p class="title">回廊亭</p>
			<p class="rate">9.1</p>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.box{
		width: 160px;
		/* border: 2px solid red; */
		position: relative;
	}
	img{
		width: 160px;
		height: 220px;
	}
	.title{
		position: absolute;
		/* top: 0; */
		left: 15px;
		/* right: 0; */
		bottom: 15px;
		color: #fff;
	}
	.rate{
		position: absolute;
		right: 15px;
		bottom: 15px;
		color: yellow;
	}
	/* 
	1. 所有在上方的元素  是A
	2. 在下方的元素是B
	A压着B
	
	步骤： 给A 设置 position： absolute;   
		给A和B的父级 设置 position: relative
		给A设置 left  top  right  bottom 去调整位置
	 */
</style>
